<template>
  <div class="main">
    <!-- 数据查询区：表单 -->
    <el-form ref="queryRef" :model="queryParams" :inline="true">
      <el-form-item label="日期类型" prop="dateType">
        <el-select
          v-model="queryParams.dateType"
          style="width: 150px"
          placeholder="请选择日期类型"
          @keyup.enter="handleQuery"
        >
          <el-option
            v-for="item in roomdateTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-select
          v-model="queryParams.name"
          style="width: 250px"
          placeholder="请选择名称"
          @change="handleQuery"
        >
          <el-option
            v-for="item in roomTypesOptions"
            :key="item.id"
            :label="item.name"
            :value="item.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="Refresh" @click="resetQuery(queryRef)">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 数据操作区：按钮 -->
    <!-- <el-row :gutter="10">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleAdd"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="Edit" @click="handleUpdate"
          >修改</el-button
        >
      </el-col>
    </el-row> -->
    <br />
    <!-- 数据展示区：表格 -->
    <el-table v-loading="loading" :data="dataList">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="ID" align="center" prop="id" />
      <el-table-column label="名称" align="center" prop="name" />
      <el-table-column label="日期类型" align="center" prop="dateType" />
      <el-table-column label="价格" align="center" prop="specialPrice" />
      <el-table-column label="禁用" align="center" prop="delFlag">
        <template #default="scope">
          <el-switch
            v-model="scope.row.delFlag"
            class="switchColor"
            :active-value="1"
            :inactive-value="0"
            @change="switchStatus(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template #default="scope">
          <el-button
            link
            type="primary"
            icon="Edit"
            size="large"
            @click="handleUpdate(scope.row)"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 数据展示区：分页加载 -->
    <el-pagination
      v-model:current-page="queryParams.pageNum"
      v-model:page-size="queryParams.pageSize"
      style="margin-top: 20px"
      :page-sizes="[5, 10, 20, 30]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 数据编辑区：新增/修改对话框 默认不显示 -->
    <el-dialog v-model="open" :title="title" width="500px" append-to-body>
      <el-form ref="formRef" :model="form" label-width="80px">
        <el-form-item label="房型名称" prop="name">
          <el-input v-model="form.name" disabled />
        </el-form-item>
        <el-form-item label="日期类型" prop="dateType">
          <el-input v-model="form.dateType" disabled />
        </el-form-item>
        <el-form-item label="价格" prop="specialPrice">
          <el-input
            v-model.number="form.specialPrice"
            placeholder="请输入价格"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm(formRef)"
            >确 定</el-button
          >
          <el-button v-show="form.id === undefined" @click="resetForm(formRef)"
            >重 置</el-button
          >
          <el-button @click="cancel()">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
/** ------------------全局导入区-------------------- */
import { ref, reactive, toRef, onMounted } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage, ElMessageBox } from "element-plus";
import { listAllRoomTypes } from "@/api/roomtypes";
import {
  listAllRooms,
  listRoomsByPage,
  getRoomById,
  addRoom,
  updateRoom
} from "@/api/rooms";
import type {
  RoomTypesDTO,
  QueryParams,
  RoomsDTO,
  RoomForm
} from "@/api/rooms";
import {
  getRoomPriceById,
  listRoomTypesPrice,
  PriceRulePageQueryDTO,
  RoomTypesPriceDTO,
  switchRoomStatus,
  updateRoomTypesPrice
} from "@/api/roomprice";
import { disposePinia } from "pinia";

onMounted(() => {
  // 挂载后加载数据
  getList();
  getRoomTypesOptions();
});

const value1 = ref("1");
/** ------------------数据查询区——表单-------------------- */
// 表单实例
const queryRef = ref<FormInstance>();

// 类别下拉框
const roomTypesOptions = ref<RoomTypesDTO[]>([]);
const roomdateTypeOptions = ref([
  {
    value: "周末",
    label: "周末"
  },
  {
    value: "节假日",
    label: "节假日"
  }
]);

function getRoomTypesOptions() {
  listAllRoomTypes().then(response => {
    roomTypesOptions.value = response.data;
  });
}

// 查询
const query = reactive<PriceRulePageQueryDTO>({
  pageNum: 1,
  pageSize: 10,
  dateType: undefined,
  name: undefined
});
const queryParams = toRef(query);
// 数据查询区--> 查询按钮
function handleQuery() {
  console.log(queryParams.value);
  queryParams.value.pageNum = 1;
  getList();
}
// 数据查询区--> 重置按钮
const resetQuery = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  getList();
};

/** ------------------数据展示区——表格-------------------- */

// 数据列表
const loading = ref<boolean>(false); // table数据加载遮罩
const total = ref<number>(0); // table数据总数
const tableData = reactive([]); // table数据
const dataList = toRef(tableData);
// 数据展示区--> 数据加载
function getList() {
  loading.value = true;
  /** 调用后端分页查询接口 */
  listRoomTypesPrice(queryParams.value).then(response => {
    dataList.value = response.data.records;
    total.value = response.data.total;
    loading.value = false;
  });
}

/** ------------------数据展示区：分页加载-------------------- */
// 分页--> 修改每页数据数（5｜10｜20｜30）
function handleSizeChange(val: number) {
  queryParams.value.pageSize = val;
  getList();
}

//分页--> 修改当前页
function handleCurrentChange(val: number) {
  queryParams.value.pageNum = val;
  getList();
}

/** ------------------数据编辑区——对话框+表单-------------------- */
// 表单数据
const formRef = ref<FormInstance>();
const formData = reactive({
  id: undefined,
  name: undefined,
  specialPrice: undefined,
  dateType: undefined
});
const form = toRef(formData);

// 对话框数据
const title = ref(""); // 对话框标题
const open = ref(false); //对话框打开
const isEditing = ref(false);

// 数据编辑区-->提交按钮
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      /** 调用后端新增和修改接口 */
      if (form.value.id != undefined) {
        updateRoomTypesPrice(form.value).then(response => {
          ElMessage({ type: "success", message: response.msg });
          getList();
          open.value = false;
        });
      }
    } else {
      console.log("表单验证未通过", fields);
    }
  });
};

// 数据编辑区-->重置按钮
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
// 数据编辑区-->取消按钮
function cancel() {
  initForm();
  open.value = false;
}

/** ------------------数据操作区——按钮-------------------- */
// 清空或赋值表单数据
const initForm = () => {
  formRef.value?.resetFields();
  form.value = { ...formData };
  console.log(form.value);
};

// 数据操作区区--> 修改按钮
function handleUpdate(row: any) {
  initForm();
  const id = row.id;
  isEditing.value = true;
  /** 调用后端id查询接口*/

  getRoomPriceById(id).then(response => {
    console.log(response.data);
    form.value = response.data;
    title.value = "修改数据[" + id + "]";
    open.value = true;
  });
}
function switchStatus(row) {
  switchRoomStatus(row).then(response => {
    ElMessage({ type: "success", message: response.msg });
  });
}
</script>

<style lang="scss" scoped>
.switchColor {
  --el-switch-on-color: #13ce66;
  --el-switch-off-color: #ff4949;
}
</style>
